@import '../../assets/css/params.less';
@import '../../assets/css/theme.less';

body {
    background: #f7f8fa !important;
}
#app,
.ant-spin-nested-loading,
.ant-spin-container {
    height: 100%;
}
.main-wrapper {
    min-height: 100%;
    margin-bottom: -80px;
    background-image: url(../../assets/image/top-gb.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto;
}
.footer-holder {
    height: 80px;
}
.footer {
    height: 80px;
    background: #EFEFEF;
}
.wrap {
    width: @mainWidth;
    min-width: @mainWidth !important;
    max-width: @mainWidth !important;
}
header {
    margin: auto;
    &.hd {
        height: 80px;
        padding: 0;
    }
    &.t-header {
        .wrap {
            font-size: 16px;
            color: #fff;
            .logo {
                vertical-align: middle;
            }
            .btn-login {
                position: absolute;
                right: 36px;
                top: 25px;
                background: none;
                border: none;
                &:hover {
                    background: none;
                    border: none;
                    text-decoration: underline;
                }
            }
        }
    }
}
.banner {
    position: relative;
    height: 328px;
    margin: 20px auto auto;
    overflow: hidden;
    color: #fff;
    &>div {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        height: 100%;
        h3 {
            color: inherit;
            font-size: 50px;
            margin-top: 70px;
            margin-bottom: 0;
        }
    }
    .anim-box {
        position: relative;
        background-image: url(../../assets/image/dunpai.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 60%;
        .t, .b {
            position: absolute;
            left: 50%;
            background-size: contain;
        }
        .t {
            width: 186px;
            height: 263px;
            margin-left: -93px;
            background-image: url(../../assets/image/t.png);
            animation: opacityFadeInAnim 2000ms linear infinite alternate;
        }
        .b {
            width: 220px;
            height: 310px;
            top: -24px;
            margin-left: -110px;
            background-image: url(../../assets/image/b.png);
            animation: opacityFadeOutAnim 2000ms linear infinite alternate;
        }
    }
}

.main-box {
    position: relative;
    width: 1200px;
    height: 256px;
    margin: auto;
    .menu-card-box {
        position: absolute;
        bottom: 0;
        background: #fff;
        box-shadow: 0px 0px 40px 0px rgba(6, 3, 61, 0.1);
        border-radius: 16px 10px 10px 10px;
        padding: 40px 50px;
        text-align: center;
        cursor: pointer;
        &.c-c {
            left: 410px;
        }
        &.r-c {
            right: 0;
        }
        .menu-icon {
            width: 89px;
            height: 89px;
            margin: auto;
            &.icon-key {
                background: url(../../assets/image/key.png);
            }
            &.icon-mobile {
                background: url(../../assets/image/mobile.png);
            }
            &.icon-third {
                background: url(../../assets/image/third.png);
            }
        }
        .menu-name {
            color: #06033D;
            font-size: 24px;
        }
        .menu-tips {
            width: 280px;
            margin-top: 15px;
            color: #A4A3B0;
        }
        .menu-list {
            height: 0;
            margin-top: 15px;
            overflow: hidden;
            transition: all 200ms linear;
            button {
                color: #06023C;
                height: 24px;
                padding: 0 10px;
                border-radius: 4px;
            }
            .ant-btn:hover, .ant-btn:focus {
                color: #336aff;
            }
            button + button {
                margin-left: 15px;
            }
            .third-party-item {
                display: inline-block;
                width: 33.3%;
                text-align: center;
                .third-party-icon {
                    width: 24px;
                    height: 24px;
                    display: block;
                    margin: auto auto 10px;
                    &.wechat {
                        background: url(../../assets/image/login-wechat-hover.png);
                    }
                    &.ding {
                        background: url(../../assets/image/login-ding-hover.png);
                    }
                    &.workwechat {
                        background: url(../../assets/image/login-qy-wechat-hover.png);
                    }
                }
            }
        }
        &:hover {
            .menu-list {
                height: 32px;
            }
            .third-party-list {
                height: 70px;
            }
        }
    }
}
.empty-holder-box {
    margin: 30px auto 20px auto;
    .empty-holder {
        height: 248px;
        background-image: url(../../assets/image/empty-holder.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-shadow: 0px 0px 40px 0px rgba(6, 3, 61, 0.1);
        margin-top: 15px;
    }
}
footer.ft {
    background-color: #ececec;
    color: #919191;
    display: block;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
	    transform: rotate(360deg);
    }
}
@keyframes opacityFadeInAnim {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes opacityFadeOutAnim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}
.validator-modal {
    .ant-form label {
        font-size: 16px;
    }
}
.step-header {
    text-align: center;
    margin-top: 15px;
    h1 {
        color:#404040;
        margin-bottom: 24px;
        font-size: 32px;
        font-weight: bold;
    }
    p {
        font-size: 14px;
        color:#5a5a5a;
    }
}
.ant-steps-item-process .ant-steps-item-icon {
    background: #336aff;
    border-color: #336aff;
    color: #fff;
}

.ant-modal-footer {
    .ant-btn {
        line-height: 32px;
        height: 32px;
    }
}